<template>
  <div style="width: 630px; margin: 0 auto">
    <div class="" style="display: flex; justify-content: center; align-items: center" >
      <el-checkbox v-model="companyPrint">公司存根</el-checkbox>
      <el-checkbox v-model="studentPrint">學生存根</el-checkbox>
        <el-button class="ml-[15px]" size="small" @click="onPrint" >打印</el-button>
    </div>

    <div
      v-for="(stubItem, stubIndex) in stubs"
      :key="stubIndex"
      id="pdfDom"
      class="tableCenter textCenter"
      style="background-color: #ffffff"
    >
      <div class="tableCenter">
        <table
          class="tableCenter w100p noBorder"
          cellpadding="0"
          cellspacing="0"
          style="text-align: left"
        >
          <tbody>
            <tr>
              <td class="printHugeBoldNormal" width="210">
                <img
                  src="../../../../image/logo.png"
                  alt=""
                  border="0"
                />
              </td>

              <td class="printLargeBoldNormal textRight">發票</td>
            </tr>
            <tr>
              <td class="printSmallNormal" colspan="2">
                分校&nbsp;:&nbsp;{{
                  formData.school_name
                }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <!-- 電話&nbsp;:&nbsp;{{formData.student_name}} -->
              </td>
            </tr>
            <tr>
              <td class="printSmallNormal" colspan="2">
                地址&nbsp;:&nbsp;{{ formData.school_name }}
              </td>
              <td></td>
            </tr>
          </tbody>
        </table>
        <br />
        <table
          class="tableCenter w100p noBorder"
          cellpadding="2"
          cellspacing="0"
          style="text-align: left"
        >
          <colgroup>
            <col width="12%" />
            <col width="37%" />
            <col width="2%" />
            <col width="12%" />
            <col width="37%" />
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal">編號&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">
                <span class="">({{ formData.number }})</span>
                (重印)
              </td>
              <td class="printSmallNormal">&nbsp;</td>
              <td class="printSmallNormal">日期&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">
                {{ formData.create_time }}
              </td>
              <!-- 27<sup>th</sup> October 2020 -->
            </tr>
            <tr>
              <td class="printSmallNormal">學生&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">
                {{ formData.student_name }}
              </td>
              <!-- (STD000827)-->
              <td class="printSmallNormal">&nbsp;</td>
              <td class="printSmallNormal">員工&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">{{ username }}</td>
            </tr>
            <tr>
              <td class="printSmallNormal">列印&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">{{ username }}</td>
              <td class="printSmallNormal">&nbsp;</td>
              <td class="printSmallNormal">銷售員&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">{{ username }}</td>
            </tr>
          </tbody>
        </table>
        <br />

        <table
          class="tableCenter w100p noBorder collapse"
          cellpadding="2"
          cellspacing="0"
        >
          <colgroup>
            <col width="5%" />
            <!-- Item -->

            <col width="30%" />
            <!-- Invoice -->
            <col width="8%" />
            <!-- 數量 -->
            <col width="5%" />
            <!-- 單位 -->
            <col width="8%" />
            <!-- 單價 -->
            <col width="11%" />
            <!-- 特別折扣 -->
            <col width="8%" />
            <!-- 折扣 -->
            <col width="11%" />
            <!-- B/F -->
            <!--<col width="11%"> Amount -->
            <!--<col width="11%"> Remain -->
            <!--<col width="11%"> Remain -->
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal vTop borderBottom1">項目</td>
              <td class="printSmallNormal textLeft vTop borderBottom1">
                課程 / 產品 / 套票
              </td>
              <td class="printSmallNormal vTop borderBottom1">數量</td>
              <!-- <td class="printSmallNormal vTop borderBottom1">單位</td> -->
              <td class="printSmallNormal vTop borderBottom1">單價</td>
              <!-- <td class="printSmallNormal vTop borderBottom1">特別折扣</td> -->
              <td class="printSmallNormal vTop borderBottom1">折扣</td>
              <td class="printSmallNormal textRight vTop borderBottom1">
                發票金額
              </td>
            </tr>
          </tbody>
        </table>
        <br />

        <table
          v-for="(item, index) in wrapList"
          :key="'a' + index"
          class="tableCenter w100p noBorder collapse"
          cellpadding="2"
          cellspacing="0"
        >
          <colgroup>
            <col width="5%" />
            <!-- Item -->
            <col width="30%" />
            <!-- Invoice -->
            <col width="8%" />
            <!-- 數量 -->
            <col width="5%" />
            <!-- 單位 -->
            <col width="8%" />
            <!-- 單價 -->
            <col width="11%" />
            <!-- 特別折扣 -->
            <col width="8%" />
            <!-- 折扣 -->
            <col width="11%" />
            <!-- B/F -->
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal vTop">{{ index + 1 }}</td>
              <td class="printSmallNormal textLeft vTop">
                {{ item.name }}
              </td>
              <td class="printSmallNormal vTop">{{ item.num }}</td>
              <!-- <td class="printSmallNormal vTop">{{item.pattern}}</td> -->
              <td class="printSmallNormal vTop">{{ item.price }}</td>
              <!-- <td class="printSmallNormal vTop">{{item.discount}}</td> -->
              <td class="printSmallNormal vTop">{{ item.discount_price }}</td>
              <td class="printSmallNormal textRight vTop">
                ${{ item.total_prices }}
              </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td colspan="7">
                <table
                  class="noBorder collapse"
                  cellpadding="2"
                  cellspacing="0"
                >
                  <colgroup>
                    <col width="110" />
                    <col width="90" />
                    <col width="90" />
                    <col width="110" />
                    <col width="90" />
                    <col width="90" />
                  </colgroup>
                  <!-- <tbody>
                    <template v-if="item.class_student_info.length > 0" >
                          <div  v-for="(itemA,indexA) in item.class_student_info" :key="indexA" >
                                               <tr>
                        <td class="printSmallNormal vTop">{{itemA[0].date}}</td>
                        <td class="printSmallNormal vTop">{{itemA[0].time}}</td>
                        <td class="printSmallNormal vTop"></td>
                        <template v-if="itemA[1]">
                          <td class="printSmallNormal vTop">{{itemA[1].date || ''}}</td>
                          <td class="printSmallNormal vTop">{{itemA[1].time || ''}}</td>
                        </template>
                      </tr>
                          </div>
                    </template>
                  </tbody> -->
                </table>
              </td>
            </tr>
          </tbody>
        </table>
        <table
          class="tableCenter w100p noBorder collapse"
          cellpadding="2"
          cellspacing="0"
          style="text-align: left"
        >
          <colgroup>
            <col width="78%" />

            <col width="11%" />
            <col width="11%" />
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal borderTop1"></td>
              <td class="printSmallNormal textRight borderTop1">總計&nbsp;:</td>
              <td class="printSmallNormal textRight borderTop1">
                ${{ formData.price }}
              </td>
            </tr>
          </tbody>
        </table>
        <br />
        <table
          class="tableCenter w100p noBorder"
          cellpadding="0"
          cellspacing="0"
        >
          <colgroup>
            <col width="80%" />
            <col width="20%" />
          </colgroup>
          <tbody>
            <tr>
              <td class=""></td>
              <td class="vTop">
                <table class="w100p noBorder" cellpadding="2" cellspacing="0">
                  <tbody>
                    <tr class="h70">
                      <td class="printSmallNormal textCenter borderBottom1">
                        &nbsp;
                      </td>
                    </tr>
                    <tr>
                      <td class="printSmallNormal textCenter">公司蓋章</td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <!-- <td class="text">備注：{{data.remarks}}</td> -->
            </tr>
            <tr>
              <td class="textLeft spaces" colspan="2">
                備注：{{ formData.remark }}
              </td>
            </tr>
          </tbody>
        </table>
        <br />

        <table
          class="tableCenter w100p noBorder"
          cellpadding="2"
          cellspacing="0"
          style="text-align: left"
        >
          <tbody>
            <tr>
              <td class="printSmallNormal textLeft spaces">
                須知：{{ formData.notice }}
              </td>
            </tr>
          </tbody>
        </table>
        <br />
        <table
          class="tableCenter w100p noBorder"
          cellpadding="0"
          cellspacing="0"
        >
          <tbody>
            <tr>
              <!-- <td class="printLittleNormal textCenter">系統提供 : </td> -->
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";


const companyPrint = ref(true);
const studentPrint = ref(true);

const stubs = computed(() => {
  const arr = [];
  if (companyPrint.value) {
    arr.push({
      stubName: "公司存根",
    });
  }
  if (studentPrint.value) {
    arr.push({
      stubName: "學生存根",
    });
  }
  console.log(arr);
  return arr;
});

const route = useRoute();
const formData = ref(JSON.parse(route.query.data));
const username = ref(route.query.username);
console.log(formData.value);
const wrapList = ref([]);
wrapList.value = [
  ...wrapList.value,
  ...formData.value.course,
  ...formData.value.product,
  ...formData.value.products_group,
  ...formData.value.ticket,
];


const onPrint = () => {
  setTimeout(() => {
    window.print();
  }, 200);
};
</script>

<style lang='less'  scoped>
#pdfDom {
  /* display: inline-block; */
  /* position: fixed; */
  padding: 20px;
  font-size: 12px;
  overflow: hidden;
  border-bottom: 2px solid #000;
  z-index: 555;
}
.formButton{
    width: 60px;
}
* {
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial, "Helvetica Neue",
    Helvetica, sans-serif;
  color: #000000;
}

.textCenter {
  text-align: center;
}
.tableCenter {
  margin: 0 auto;
}
.w100p {
  width: 100%;
}
.noBorder {
  border: 0;
}
.printHugeBoldNormal {
  font-family: Arial;
  font-size: 16pt;
  font-weight: bold;
}
.printLargeBoldNormal {
  font-family: Arial;
  font-size: 12pt;
  font-weight: bold;
}
.textRight {
  text-align: right;
}
.printSmallNormal {
  font-family: Arial;
  font-size: 8pt;
}
.borderBottom1dot {
  border-bottom: 1px dotted #cccccc;
}
.floatRight {
  float: right;
}
table.collapse {
  border-collapse: collapse;
}
.textLeft {
  text-align: left;
}
.vTop {
  vertical-align: top;
}
.borderTop1 {
  border-top: 1px solid black;
}
.borderBottom1 {
	border-bottom: 1px solid black;
}
.spaces {
  white-space: break-spaces;
}
</style>